<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <link rel="stylesheet" href="/static/index/css/amazeui.min.css">
    <link rel="stylesheet" href="/static/index/css/wap.css">
    <title>内容页列表页</title>
</head>
<body style="background:#ececec">
<div class="pet_mian">
    <div class="pet_head">
        <header data-am-widget="header"
                class="am-header am-header-default pet_head_block">
            <div class="am-header-left am-header-nav ">
                <a href="javascript:history.go(-1);" class="iconfont pet_head_jt_ico">&#xe601;</a>
            </div>
            <div class="am-header-right am-header-nav">
                <a href="{:url('index/index/index')}" class="iconfont pet_head_gd_ico">&#xe600;</a>
            </div>
        </header>
    </div>

    <div class="pet_content pet_content_list">
        <div class="pet_article_like">
            <div class="pet_content_main pet_article_like_delete">
                <div data-am-widget="list_news" class="am-list-news am-list-news-default am-no-layout">
                    <div class="am-list-news-bd">
                        <ul class="am-list" id="artlist">
                            <div class="tpl-login">
                                <div class="tpl-login-content">
                                    <form class="am-form myform" action="{:url('index/Baoming/dobaoming')}"
                                          method="post">
                                        <fieldset>
                                            <legend>我要报名</legend>
                                            <div class="am-form-group">
                                                <label for="doc-ipt-email-1">手机号</label>
                                                <input type="tel" class="mytel" name="mytel" id="doc-ipt-email-1"
                                                       maxlength="11">
                                                <span></span>
                                            </div>
                                            <div class="am-form-group">
                                                <label for="doc-select-1">选择课程</label>
                                                <select id="doc-select-1" name="course" class="mycourse">
                                                    <option value="-1">请选择课程</option>
                                                    {volist name="course" id="data"}
                                                    <option value="{$data.id}">{$data.coursename}</option>
                                                    {/volist}
                                                </select>
                                                <span class="am-form-caret"></span>
                                            </div>
                                            <div class="am-form-group">
                                                <label for="doc-select-2">选择班期</label>
                                                <select id="doc-select-2" name="class" class="myclass">
                                                    <option value="-1">请选择班期</option>
                                                </select>
                                                <span class="am-form-caret"></span>
                                            </div>
                                            <div class="am-form-group">
                                                <label for="doc-ipt-email-1">推荐人手机号</label>
                                                <input type="tel" maxlength="11" class="rerfertel" name="reftel"
                                                       id="doc-ipt-email-1"
                                                       {if condition="empty($refertel)" }
                                                       {else /}value="{$refertel}" readonly
                                                {/if} placeholder="输入推荐人手机号">
                                                <span></span>
                                            </div>
                                            <div class="am-form-group">
                                                <label for="doc-ipt-email-2">活动名称</label>
                                                {if condition="is_array($actname)"}
                                                <select id="doc-select-1" name="activity" class="myactivity">
                                                    <option value="-1">请选择活动</option>
                                                    {volist name="actname" id="data"}
                                                    <option value="{$data.id}">{$data.name}</option>
                                                    {/volist}
                                                </select>
                                                {else /}
                                                <input type="text" name="activity" class="myactivity"
                                                       id="doc-ipt-email-2"
                                                       placeholder="活动名称" value="{$actname}" readonly>
                                                {/if}
                                            </div>
                                            <p>
                                                <button type="button" class="am-btn am-btn-secondary sum">计算金额</button>
                                            </p>
                                            <input type="hidden" class="fee" name="fee" value="">
                                            <input type="hidden" class="reward" name="reward" value="">
                                            <div class="money" style="display: none">
                                                <span>课程原价：<a href="javascript:;"><i
                                                        class="yuanjia">0</i></a></span><br>
                                                <span>活动优惠：<a href="javascript:;"><small
                                                        class="youhui">0</small></a></span><br>
                                                <span>应付金额：<a href="javascript:;" style="font-weight: bold"
                                                              class="yingfu">0</a></span>
                                            </div>
                                            <p>
                                                <button type="submit" class="am-btn am-btn-primary">提交</button>
                                            </p>
                                        </fieldset>
                                    </form>
                                </div>
                            </div>
                            <!--缩略图在标题右边-->
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="pet_article_footer_info">Copyright(c)2015 PetShow All Rights Reserved</div>
    </div>
</div>
<script src="/static/index/js/jquery.min.js"></script>
<script src="/static/index/js/amazeui.min.js"></script>
<script>
    $(function () {

        // 动态计算新闻列表文字样式
        auto_resize();
        $(window).resize(function () {
            auto_resize();
        });
        $('.am-list-thumb img').load(function () {
            auto_resize();
        });
        $('.pet_article_like li:last-child').css('border', 'none');
        function auto_resize() {
            $('.pet_list_one_nr').height($('.pet_list_one_img').height());
            // alert($('.pet_list_one_nr').height());
        }

        $('.pet_article_user').on('click', function () {
            if ($('.pet_article_user_info_tab').hasClass('pet_article_user_info_tab_show')) {
                $('.pet_article_user_info_tab').removeClass('pet_article_user_info_tab_show').addClass('pet_article_user_info_tab_cloes');
            } else {
                $('.pet_article_user_info_tab').removeClass('pet_article_user_info_tab_cloes').addClass('pet_article_user_info_tab_show');
            }
        });

        $('.pet_head_gd_ico').on('click', function () {
            $('.pet_more_list').addClass('pet_more_list_show');
        });
        $('.pet_more_close').on('click', function () {
            $('.pet_more_list').removeClass('pet_more_list_show');
        });

        $('.mytel').blur(function () {
            var mytel = $(this);
            checkmytel(mytel);
        });
        $('.rerfertel').blur(function () {
            var tel = $(this);
            checktel(tel);
        });
        $('.mycourse').change(function () {
            var courseid = $(this).val();
            $.ajax({
                type: 'get',
                dataType: 'json',
                data: {
                    'courseid': courseid
                },
                url: "{:url('index/Baoming/getclassid')}",
                success: function (data) {
                    yuanjia = data.money.price;
                    $('.yuanjia').html(data.money.price);
                    $('.myclass').empty();
                    for (var i = 0; i < data.class.length; i++) {
                        var options = ("<option value='" + data.class[i].id + "'>" + data.class[i].classname + "</option>");
                        $(options).appendTo('.myclass');
                    }
                }
            });
        });

//        $('.myactivity').change(function () {
//            var myactivity = $(this).val();
//            $.ajax({
//                type: 'get',
//                dataType: 'json',
//                data: {
//                    'myactivity': myactivity
//                },
//                url: "{:url('index/Baoming/getActivityMoney')}",
//                success: function (data) {
//                    $('.youhui').html(data.concession);
//                    yingfu = yuanjia - data.concession
//                    $('.yingfu').html(yingfu);
//                    $('.fee').val(yingfu);
//                }
//            });
//        });
        $('.sum').click(function () {
            var act = $('.myactivity').val();
            var course = $('.mycourse').val();
            if (course < 0) {
                alert('请选择课程和班期');
                return;
            }
            $('.money').slideDown();
            $.ajax({
                type: 'post',
                dataType: 'json',
                url: "{:url('index/Baoming/doMoney')}",
                data: {
                    'act': act,
                    'course': course
                },
                success: function (data) {
                    $('.yuanjia').html(data.yuanjia);
                    $('.youhui').html(data.youhui);
                    $('.yingfu').html(data.yingfu);
                    $('.reward').val(data.rewards);
                    $('.fee').val(data.yingfu);
                }
            });
        });

        $('.myform').submit(function () {
            var tel = $('.mytel');
            var rerfertel = $('.rerfertel');
//            console.log(checkretel(tel, rerfertel));
//            return false;
            var course = $('.mycourse').val();
            var clas = $('.myclass').val();
            var actid = $('.myactivity').val();
//            console.log(course);
//            console.log(clas);
//            console.log(actid);
//            return false;
            return (function () {


                if (checkmytel(tel) && checkretel(tel, rerfertel) && checktel(rerfertel)) {
//                    var course = $('.mycourse').val();
//                    var clas = $('.myclass').val();
//                    var actid = $('.activity').val();
//                    return false;
//                    console.log(actid);
                    if (actid < 0) {
                        alert('请选择活动');
                        return false;
                    }
                    if (course < 0 || clas < 0) {
                        alert('请选择班期和课程');
                        return false;
                    }
//                    return false;
                    return true;
                } else {
                    return false;
                }
            })();
            return false;
        });
    });
    function checkretel(mytel, rerfertel) {
        if (mytel.val() == rerfertel.val()) {
            alert('推荐人不能是自己哦');
            return false;
        } else {
            mytel.next('span').html('');
            return true;
        }
    }
    function checkmytel(mytel) {
        var reg = /^1[3|4|5|7|8][0-9]{9}$/;
        if (reg.test(mytel.val())) {
            mytel.next('span').html('');
            return true;
        } else {
            mytel.next('span').css('color', 'red').html('手机号不符合规则');
            return false;
        }
    }
    function checktel(tel) {
        var ret = '';
        $.ajax({
            url: "{:url('index/Register/checktel')}",
            type: 'post',
            async: false,
            data: {
                'tel': tel.val()
            },
            success: function (data) {
                if (data) {
                    tel.next('span').css('color', 'red').html('该推荐人不存在');
                    ret = 'false';
                } else {
                    tel.next('span').html('');
                }
            }
        });
        if (ret == 'false') {
            return false;
        }
        return true;
    }

</script>
</body>
</html>
